<?php
get_header(); 
$slug_gallery = get_query_var('slug_gallery');
$gallery_id = get_id_by_slug($slug_gallery, 'gallery');
$gallery = nggdb::find_gallery( $gallery_id );
 ?>

 <script type="text/javascript">
	$('.header').addClass('product news ctbst');
</script>
<script src="<?php echo bloginfo('template_url'); ?>/js/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url'); ?>/css/skins/tango/skin.css" />
<!-- Add fancyBox -->
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/js/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/js/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<div class="row">
                <div class="col-lg-5 col-sm-6 col-12"></div>
	    		<div class="col-lg-7 col-sm-6 col-12 header-description hidden-sm">
	    			<div class="title step">
                        <div class="line_1"><?php echo $gallery->title; ?></div>
                        <span class="google-plus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true">{lang: 'vi'}</script></span>
                    </div>
                    <p class="mt20"><?php echo $gallery->galdesc; ?></p>
                </div>
	    	</div>
	    </div>
    </div>
   
    <!-- Content -->
    <div class="main-content container bst_2">
    	<div class="row">
            <div class="col-lg-5 col-sm-6 col-12 thumb-product thumb-news thumb-gallery">
            	<div id="carousel-example-big" data-interval="false" class="carousel slide visible-lg" style=" min-height: 547px; ">
					  <!-- Wrapper for slides -->
					  <div class="carousel-inner">
					  <?php
					  	$i=0;
					  	$picture = nggdb::find_last_images(0,100,true,$gallery_id);
					  	foreach($picture as $row){
							$_ngiw = $row->_ngiw; 
							$_cache = $_ngiw->_cache;
					  		$path = $row->get_permalink();
					  		$path = explode('wp-content', $path);
							$imgpath = site_url().'/wp-content'.$path[1]; ?>
					   		<div class="item <?php if($i==0){ ?>active<?php } ?>">
			            		<a class="fancybox" rel="group" href="<?php echo $imgpath; ?>"><img alt="<?php echo    $_cache['alttext'];  ?>" src="<?php echo $imgpath; ?>" class="img-thumbnail"></a>
			            	</div>
					    <?php $i++; } ?>
					  </div>
					    <script type="text/javascript">
							$(".fancybox").fancybox({
								closeBtn	: false,
								helpers		: {
									title	: { type : 'inside' },
									buttons	: {}
								}
							});
					    </script>
					  <!-- Controls -->
					  <a style="display:none;" class="left carousel-control" href="#carousel-example-big" data-slide="prev">
					    <span class="icon-prev"></span>
					  </a>
					  <a style="display:none;" class="right carousel-control" href="#carousel-example-big" data-slide="next">
					    <span class="icon-next"></span>
					  </a>
					</div> 
              <div id="carousel-example-big-md" data-interval="false" class="carousel slide visible-md" style="top: -5px;min-height: 528px;position: relative;">
					  <!-- Wrapper for slides -->
					  <div class="carousel-inner">
					  <?php
					  	$i=0;
					  	$picture = nggdb::find_last_images(0,100,true,$gallery_id);
					  	foreach($picture as $row){
							$_ngiw = $row->_ngiw; 
							$_cache = $_ngiw->_cache;
					  		$path = $row->get_permalink();
					  		$path = explode('wp-content', $path);
							$imgpath = site_url().'/wp-content'.$path[1]; ?>
					   		<div class="item <?php if($i==0){ ?>active<?php } ?>">
			            		<a class="fancybox" rel="group" href="<?php echo $imgpath; ?>"><img alt="<?php echo    $_cache['alttext'];  ?>" src="<?php echo $imgpath; ?>" class="img-thumbnail"></a>
			            	</div>
					    <?php $i++; } ?>
					  </div>
					    <script type="text/javascript">
							$(".fancybox").fancybox({
								closeBtn	: false,
								helpers		: {
									title	: { type : 'inside' },
									buttons	: {}
								}
							});
					    </script>
					  <!-- Controls -->
					  <a style="display:none;" class="left carousel-control" href="#carousel-example-big-md" data-slide="prev">
					    <span class="icon-prev"></span>
					  </a>
					  <a style="display:none;" class="right carousel-control" href="#carousel-example-big-md" data-slide="next">
					    <span class="icon-next"></span>
					  </a>
					</div> 
              <div id="carousel-example-big-sm" data-interval="false" class="carousel slide visible-sm">
					  <!-- Wrapper for slides -->
					  <div class="carousel-inner">
					  <?php
					  	$i=0;
					  	$picture = nggdb::find_last_images(0,100,true,$gallery_id);
					  	foreach($picture as $row){
							$_ngiw = $row->_ngiw; 
							$_cache = $_ngiw->_cache;
					  		$path = $row->get_permalink();
					  		$path = explode('wp-content', $path);
							$imgpath = site_url().'/wp-content'.$path[1]; ?>
					   		<div class="item <?php if($i==0){ ?>active<?php } ?>">
					   			<div class="sitem">
			            			<a class="fancybox" rel="group" href="<?php echo $imgpath; ?>"><img alt="<?php echo    $_cache['alttext'];  ?>" src="<?php echo $imgpath; ?>" class="img-thumbnail"></a>
						      	</div>
						      	<p class="contact-name"><?php echo $row->alttext; ?></p>
			            	</div>
					    <?php $i++; } ?>
					  </div>
					    <script type="text/javascript">
							$(".fancybox").fancybox({
								closeBtn	: false,
								helpers		: {
									title	: { type : 'inside' },
									buttons	: {}
								}
							});
					    </script>
					  <!-- Controls -->
					  <a style="display:none;" class="left carousel-control" href="#carousel-example-big-sm" data-slide="prev">
					    <span class="icon-prev"></span>
					  </a>
					  <a style="display:none;" class="right carousel-control" href="#carousel-example-big-sm" data-slide="next">
					    <span class="icon-next"></span>
					  </a>
					</div> 
              </div>
            <div class="col-lg-7 col-sm-6 col-12 m30">
            	<div class="clearfix"></div>
            	<div class="visible-lg">
	            	<div class="mini-description">
		            	<ul id="mycarousel" class="jcarousel-skin-tango">
							<?php
						  	$picture = nggdb::find_last_images(0,100,true,$gallery_id);
						  	foreach($picture as $row){
								
						  		$path = $row->get_permalink();
						  		$path = explode('wp-content', $path);
								$imgpath = site_url().'/wp-content'.$path[1]; ?>
						      <li>
						      	<p class="contact-name"><?php echo $row->alttext; ?></p>
				            	<p class="hidden-sm">
				            		Tags: 
				            		<?php $tags = $row->get_tags(); ?>
				            		<?php if(empty($tags)){ ?>
				            			<?php $tags_default = wp_get_object_terms($gallery_id,'ngg_tag') ?>
										<?php foreach ( $tags_default as $tag ) : ?>
										   <a href="<?php bloginfo('url'); ?>/tag/<?php echo $tag->slug; ?>"><?php echo $tag->name; ?></a>, 
										<?php endforeach; ?>
				            		<?php } ?>
									<?php foreach ( $tags as $tag ) : ?>
									   <a href="<?php bloginfo('url'); ?>/tag/<?php echo $tag->slug; ?>"><?php echo $tag->name; ?></a>
									<?php endforeach; ?>
				            	</p>
						      </li>
						  	<?php } ?>
			            </ul>
						  <!-- Controls -->
						  <a style="display:none;" class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
						    <span class="icon-prev"></span>
						  </a>
						  <a style="display:none;" class="right carousel-control" href="#carousel-example-generic" data-slide="next">
						    <span class="icon-next"></span>
						  </a>
			        </div>
	            	<div class="mini-gallery">
		            	<ul id="mycarousel2" class="jcarousel-skin-tango">
							<?php
						  	$picture = nggdb::find_last_images(0,100,true,$gallery_id);
						  	foreach($picture as $row){
								$_ngiw = $row->_ngiw; 
								$_cache = $_ngiw->_cache;
						  		$path = $row->get_permalink();
						  		$path = explode('wp-content', $path);
								$imgpath = site_url().'/wp-content'.$path[1]; ?>
						      <li>
						      	<img src="<?php echo $imgpath; ?>" alt="<?php echo $_cache['alttext'];  ?>" class="img-thumbnail">
						      </li>
						  	<?php } ?>
			            </ul>
						  <!-- Controls -->
						  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
						    <span class="icon-prev"></span>
						  </a>
						  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
						    <span class="icon-next"></span>
						  </a>
			        </div>
		        </div>
		        <div class="visible-md">
	            	<div class="mini-description">
		            	<ul id="mycarousel" class="jcarousel-skin-tango">
							<?php
						  	$picture = nggdb::find_last_images(0,100,true,$gallery_id);
						  	foreach($picture as $row){
								
						  		$path = $row->get_permalink();
						  		$path = explode('wp-content', $path);
								$imgpath = site_url().'/wp-content'.$path[1]; ?>
						      <li>
						      	<p class="contact-name"><?php echo $row->alttext; ?></p>
				            	<p class="hidden-sm">
				            		Tags: 
				            		<?php $tags = $row->get_tags(); ?>
				            		<?php if(empty($tags)){ ?>
				            			<?php $tags_default = wp_get_object_terms($gallery_id,'ngg_tag') ?>
										<?php foreach ( $tags_default as $tag ) : ?>
										   <a href="<?php bloginfo('url'); ?>/tag/<?php echo $tag->slug; ?>"><?php echo $tag->name; ?></a>, 
										<?php endforeach; ?>
				            		<?php } ?>
									<?php foreach ( $tags as $tag ) : ?>
									   <a href="<?php bloginfo('url'); ?>/tag/<?php echo $tag->slug; ?>"><?php echo $tag->name; ?></a>
									<?php endforeach; ?>
				            	</p>
						      </li>
						  	<?php } ?>
			            </ul>
						  <!-- Controls -->
						  <a style="display:none;" class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
						    <span class="icon-prev"></span>
						  </a>
						  <a style="display:none;" class="right carousel-control" href="#carousel-example-generic" data-slide="next">
						    <span class="icon-next"></span>
						  </a>
			        </div>
	            	<div class="mini-gallery">
		            	<ul id="mycarousel2" class="jcarousel-skin-tango">
							<?php
						  	$picture = nggdb::find_last_images(0,100,true,$gallery_id);
						  	foreach($picture as $row){
								$_ngiw = $row->_ngiw; 
								$_cache = $_ngiw->_cache;
						  		$path = $row->get_permalink();
						  		$path = explode('wp-content', $path);
								$imgpath = site_url().'/wp-content'.$path[1]; ?>
						      <li>
						      	<img src="<?php echo $imgpath; ?>" alt="<?php echo $_cache['alttext'];  ?>" class="img-thumbnail">
						      </li>
						  	<?php } ?>
			            </ul>
						  <!-- Controls -->
						  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
						    <span class="icon-prev"></span>
						  </a>
						  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
						    <span class="icon-next"></span>
						  </a>
			        </div>
		        </div>
		        <div class="visible-sm">
	            	<div class="mini-gallery">
		            	<ul id="mycarousel2" class="jcarousel-skin-tango">
							<?php
						  	$picture = nggdb::find_last_images(0,100,true,$gallery_id);
						  	foreach($picture as $row){
								$_ngiw = $row->_ngiw; 
								$_cache = $_ngiw->_cache;
						  		$path = $row->get_permalink();
						  		$path = explode('wp-content', $path);
								$imgpath = site_url().'/wp-content'.$path[1]; ?>
						      <li>
						      	<img src="<?php echo $imgpath; ?>" alt="<?php echo $_cache['alttext'];  ?>" class="img-thumbnail">
						      </li>
						  	<?php } ?>
			            </ul>
						  <!-- Controls -->
						  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
						    <span class="icon-prev"></span>
						  </a>
						  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
						    <span class="icon-next"></span>
						  </a>
			        </div>
		        </div>
		        <div class="clearfix"></div>
		        <div class="hidden-sm" style=" margin-left: 30px; ">
            		<div class="col-lg-2 col-sm-3">
            			<button class="btn btn-custom hidden-sm" onclick="$('#carousel-example-big .active .fancybox').click();">Xem ảnh</button>
            		</div>
            		<div class="col-lg-2 col-sm-3" style="margin-left:10px;">
            			<button class="btn btn-custom" onclick="document.location.href='<?php echo site_url() ?>/shop'">Mua sắm</button>
            		</div>
            	</div>
				<script type="text/javascript">
				 	$('.visible-lg #mycarousel').jcarousel({
			            wrap: 'circular',
			            scroll: 1,
			            start: 1
			        });
			        $('.visible-lg #mycarousel2').jcarousel({
			            wrap: 'circular',
			            scroll: 1,
			            start: 1
			        });
					$('.visible-lg .mini-gallery .carousel-control.right').click(function() {
			            $('.visible-lg .mini-gallery .jcarousel-next-horizontal').click();
			            $('.visible-lg .mini-description .jcarousel-next-horizontal').click();
			            $('#carousel-example-big .carousel-control.right').click();
			        });
			        $('.visible-lg .mini-gallery .carousel-control.left').click(function() {
			            $('.visible-lg .mini-gallery .jcarousel-prev-horizontal').click();
			            $('.visible-lg .mini-description .jcarousel-prev-horizontal').click();
			            $('#carousel-example-big .carousel-control.left').click();
			        });

			        $('.visible-md #mycarousel').jcarousel({
			            wrap: 'circular',
			            scroll: 1,
			            start: 1
			        });
			        $('.visible-md #mycarousel2').jcarousel({
			            wrap: 'circular',
			            scroll: 1,
			            start: 1
			        });
					$('.visible-md .mini-gallery .carousel-control.right').click(function() {
			            $('.visible-md .mini-gallery .jcarousel-next-horizontal').click();
			            $('.visible-md .mini-description .jcarousel-next-horizontal').click();
			            $('#carousel-example-big-md .carousel-control.right').click();
			        });
			        $('.visible-md .mini-gallery .carousel-control.left').click(function() {
			            $('.visible-md .mini-gallery .jcarousel-prev-horizontal').click();
			            $('.visible-md .mini-description .jcarousel-prev-horizontal').click();
			            $('#carousel-example-big-md .carousel-control.left').click();
			        });

			        $('.visible-sm #mycarousel2').jcarousel({
			            wrap: 'circular',
			            scroll: 1,
			            start: 1
			        });
					$('.visible-sm .mini-gallery .carousel-control.right').click(function() {
			            $('.visible-sm .mini-gallery .jcarousel-next-horizontal').click();
			            $('.visible-sm .mini-description .jcarousel-next-horizontal').click();
			            $('#carousel-example-big-sm .carousel-control.right').click();
			        });
			        $('.visible-sm .mini-gallery .carousel-control.left').click(function() {
			            $('.visible-sm .mini-gallery .jcarousel-prev-horizontal').click();
			            $('.visible-sm .mini-description .jcarousel-prev-horizontal').click();
			            $('#carousel-example-big-sm .carousel-control.left').click();
			        });
				</script>
				</div>
				<div class="clearfix"></div>
				<div class="col-12 header-description visible-sm">
	    			<div class="title step">
                        <div class="line_1"><?php echo $gallery->title; ?></div>
                        <span class="google-plus"><script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true">{lang: 'vi'}</script></span>
                    </div>
                    <p class="mt20"><?php echo $gallery->galdesc; ?></p>
                </div>
				<div class="clearfix"></div>
            	<div class="visible-sm">
            		<div class="col-lg-2 col-sm-3">
            			<button class="btn btn-custom hidden-sm" onclick="$('#carousel-example-big .active .fancybox').click();">Xem ảnh</button>
            		</div>
            		<div class="col-lg-2 col-sm-3">
            			<button class="btn btn-custom" onclick="document.location.href='<?php echo site_url() ?>/shop'">Mua sắm</button>
            		</div>
            	</div>
            	<p class="visible-sm mt20" style="padding:0 15px;">
            		Tags: 
            		<?php $tags = wp_get_object_terms($gallery_id,'ngg_tag') ?>
					<?php foreach ( $tags as $tag ) : ?>
					   <a href="<?php bloginfo('url'); ?>/tag/<?php echo $tag->slug; ?>"><?php echo $tag->name; ?></a>, 
					<?php endforeach; ?>
            	</p>
            </div>
    	</div>
    </div>
<style type="text/css">
	#carousel-example-big-sm .carousel-inner {
		margin-bottom: -35px;
	}
@media (max-width: 767px){
	.bst_2 .header-description .title.step {
		height: auto;
		zoom: 1;
	}
	.header-description .title .line_1{
		font-size: 25px;
	}
}
</style>

<?php get_footer() ?>